<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-10-01 20:43:28
-->
<template>
  <!-- 写在vue template只允许存在一个div根标签 -->
  <div>
    <!-- 头部开始 -->
    <!-- 1.创建一个组件
            头部结构
            头部样式
         2.使用公共组件
            1）引入到使用的vue页面中
            2）注册组件 components:{Header}
            3）使用组件 -->
    <Header></Header>
    <!-- 头部结束 -->

    <!-- 体部 -->
    <div class="content">
      <!-- 轮播图 -->
    <div class="wrapper">
          <div class="carousel">
        <el-carousel height="300px">
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <img :src="item.url" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
     </div>
    
      <!-- /轮播图 -->
      <!-- 板块 -->
      <div class="plates">
        <div class="wrapper">
          <div class="plate"  v-for="cas in articles" :key="cas.category.id">
            <div class="head">
              <div class="title">&nbsp;&nbsp;{{cas.category.name}}</div>
              <div class="more" @click="toList(cas.category)">更多&gt;&gt;&nbsp;&nbsp;</div>
            </div>
            <ul class="list" >
              <li v-for="a in cas.aritcle" :key='a.id' @click="toArticles(a)">&nbsp;&nbsp;●&nbsp;&nbsp;{{a.title}}</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 体部结束 -->
    </div>
    <!-- /体部 -->

    <!-- 底部开始 -->
    <Footer></Footer>
    <!-- 底部结束 -->
  </div>
</template>

<script>
import { get } from "../utils/request";
import Header from "../components/Header.vue";
//引入Footer组件
import Footer from "../components/Footer.vue";
export default {
  //注册组件
  components: {
    Header,
    Footer,
  },
  
  //存放vue变量
  data() {
    return {
      carousels: [],
    
      articles:[]   //{[]}
    };
  },
  //方法：事件处理程序
  methods: {
    toList(item){
      this.$router.push({
        path:'/list',
        query:item
      })
    },
       toArticles(a){
       this.$router.push({
            path:'/detail',
            query:a
          })
    },
    //封装加载轮播图
    loadCarousel() {
      let url = "/index/carousel/findAll";
      get(url).then((resp) => {
        //箭头函数没有this指向
        this.carousels = resp.data;
      });
    },
  
      //加载文章
    loadArticle(){
      let url = '/index/article/findCategoryArticles'
      get(url).then(res=>{
        this.articles = res.data
      })
    }
  },
  //vue代码执行阶段执行函数，生命周期钩子函数
  created() {
    this.loadCarousel();
    this.loadArticle()
  },
};
</script>

<!-- scss预编译-->
<style lang='scss' scoped>
// 体部开始
.content {
  // background-color: #e9f3ff;
  background-image: url('../assets/resoure/img/bbgg.jpg');
  background-size: contain;
  // height: 300px;
  .carousel {
    height: 300px;
    margin-bottom: 2em;
  }
  .plates {
    & > .wrapper::after {
      display: block;
      content: "";
      clear: both;
    }

    .plate {
      float: left;
      width: 32.5%;
      margin-right: 1.25%;
      margin-bottom: 0.8em;
      background-color: #fff;
      height: 300px;
      ul.list > li {
        line-height: 3.1em;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #061b74;
        border-bottom: .1px solid #ccc;
        font-family: "微软雅黑";
        font-size: 16px;
      }
      ul > li:hover {
        color: #1e58b3;
        cursor: pointer;
      }
      .head {
        display: flex;
        justify-content: space-between;
        padding:0.6em 0;
        border-bottom: #1f5fb9 solid 5px;
        .title {
          font-size: 22px;
          font-weight: bold;
          color: #1f5fb9;
          cursor: pointer;
         
        }
        .more {
          color: #999;
          cursor: pointer;
        }
      }
    }
    .plate:nth-child(3n) {
      margin-right: 0;
    }
  }
}
</style>